<template>
	<view>
		<view class="×" @click="huitui">×</view>
		<view class="user">
			<text class="title">手机验证</text>
			<wd-input class="Input" v-model="tel" prefix-icon="phone" placeholder="请输入手机号" />
			<view style="display: flex">
				<wd-input style="width: 70%" class="Input" v-model="yzm" prefix-icon="secured" placeholder="请输入验证码" maxlength="10px" />
				<button :disabled="!is_countdown_type ? false : true" style="margin: 0; padding: 0; color: yellowgreen; background-color: white; border: none" @click="fetch_yzm">
					{{ !is_countdown_type ? '获取验证码' : countdown + 's' }}
				</button>
			</view>

			<button class="login_Button" @click="verify">验证</button>
			<wd-toast />
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useToast } from '@/uni_modules/wot-design-uni';
import { getyzm, register } from '../../api/api';

const toast = useToast();

let tel = ref('');
let yzm = ref('');
let true_yzm = ref('1234');

let countdown = ref(60);
let is_countdown_type = ref(false);

// 倒计时获取验证码
let fetch_yzm = async () => {
	if (tel.value === '') {
		toast.error('请输入手机号');
		// 判断手机号格式是否正确
	} else if (!/^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/.test(tel.value)) {
		toast.error('请输入正确的手机号');
	} else {
		is_countdown_type.value = true;
		let data: any = await getyzm({ tel: tel.value });
		true_yzm.value = data.len;
		// console.log(getuseryzm.value);
		let a = setInterval(() => {
			countdown.value--;
			console.log();
			if (countdown.value == 0) {
				clearInterval(a);
				countdown.value = 60;
				is_countdown_type.value = false;
			}
		}, 1000);
	}
};

// 验证
const verify = async () => {
	if (yzm.value != true_yzm.value) {
		toast.error('验证码有误');
	} else {
		uni.redirectTo({
			url: `/pages/reset/reset?tel=${tel.value}`
		});
	}
};

// 回退
const huitui = () => {
	uni.navigateBack({
		delta: 1
	});
};
</script>

<style lang="scss" scoped>
.× {
	width: 60px;
	height: 60px;
	font-size: 60rpx;
	text-align: center;
	line-height: 60px;
}
.user {
	margin: 20px;
	position: relative;
	.title {
		display: block;
		font-size: 40px;
		margin-top: 100px;
		margin-bottom: 60px;
	}
	.Input {
		margin-bottom: 50rpx;
	}
	.forget {
		position: absolute;
		right: 0;
	}
	.login_Button {
		margin-top: 20px;
		background-color: yellow;
		margin-bottom: 20px;
	}
	.enroll {
		position: fixed;
		left: 50%;
		bottom: 10%;
		color: black;
		margin-left: -16px;
	}
	.wechat_login {
		position: fixed;
		left: 50%;
		bottom: 15%;
		margin-left: -5rem;
		width: 10rem;
		background-color: white;
		border: 1px solid gray;
		color: gray;
		border-radius: 50px;
	}
}

uni-button:after {
	border: none;
}
</style>
